<template>
  <div>
     <h1>vue的编程式跳转</h1>
     <button @click="turnAbout">去到关于页</button>
     <button @click="toHome">跳转首页 并query传参</button>
     <button @click="toIndex">跳转首页 并用params传参</button>
  </div>
</template>
<script>
export default {
  name: 'Cart',
  methods:{
    turnAbout(){
      // vue的编程式跳转方法1  
      // this.$router.push("/path") //直接使用path跳转
      // this.$router.push("/about")
      // push的写法2 path跳转
      // this.$router.push({path:"/about"})
      // push 写法3 用name跳转
      this.$router.push({name:"about"})
      
    },
    toHome(){
      // 用path 跳转并query传参
      // this.$router.push({
      //   path:"/", //跳转的路径
      //   query:{//query 传参 地址栏中?显示的 多个参数用&连接 ,刷新页面不丢失参数
      //      pname:"iphonr16promax",
      //      id:188123
      //   }  
      // })

    // name跳转并  query传参
      this.$router.push({
        name:"home",
        query:{
          city:"北京",
          id:123456
        }
      })

    },
    toIndex(){ //跳转首页
       this.$router.push({
        name:"home",
        params:{ //params传参 地址栏中不显示,刷新页面丢失参数
           myname:"雷军",
           age:48
        }
       })
    }
  }
}
</script>